<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <style>
      .wrap {
        width: 300px;
        height: 200px;
        margin: 100px auto;
        text-align: center;
        border: 1px solid #ccc;
      }
      .wrap > p {
        display: flex;
        justify-content: space-between;
        margin: 20px 20px;
      }
      .wrap > p:nth-of-type(3) {
        justify-content: space-evenly;
      }
      .wrap input {
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h2>登录</h2>
      <p>用户名：<input type="text" /></p>
      <p>密码：<input type="text" /></p>
      <p>
        <button onclick="resetFn()">重置</button
        ><button onclick="loginFn()">登录</button>
      </p>
    </div>
  </body>
  <script type="module">
    import http from "./request.js";
    window.resetFn = function () {
      document.querySelectorAll("p input").forEach((v) => {
        v.value = null;
      });
    };
    window.loginFn = function () {
      let ipt = document.querySelectorAll("input");
      http
        .request({
          url: "/users/login",
          method: "post",
          data: {
            username: ipt[0].value,
            password: ipt[1].value,
          },
        })
        .then((r) => {
          console.log(r.data);
          // console.log(typeof r.data);
          if (r.data.code == 1) {
            localStorage.setItem("token", r.data.token);
            location.href = "./todo_axios.html";
          } else {
            ipt.forEach((v) => {
              v.value = null;
            });
          }
          alert(r.data.message);
        });
    };
  </script>
</html>
